<template>
    <div class="login_container">
      <!-- 登录框 -->
      <div class="login_box">
        <!-- 头像框 -->
        <div class="avater_box">
          <img src="../assets/logo.png" alt="" />
        </div>
        <!-- 登录表单 -->
  
        <!-- 表单验证 添加:rules 父组件是:model -->
        <!-- 有验证规则但不想加红色星号，可以在el-form标签上加 ：hide-required-asterisk=“true”
                  当没有添加验证规则，但又要加上红色星号，可以在el-form-item标签上加 ：required=“true” -->
        <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="loginFormRules"
          :hide-required-asterisk="true"
          label-width="60px"
          class="login_from"
        >
          <!-- 账号 -->
          <el-form-item label="账号" prop="username">
            <el-input
              v-model="loginForm.username"
              placeholder="请输入账号"
              prefix-icon="el-icon-user-solid dong"
            ></el-input>
          </el-form-item>
  
          <!-- 密码 -->
          <!-- prefix-icon="el-icon-user-solid"　在前面添加小图标 -->
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="loginForm.password"
              show-password
              placeholder="请输入密码"
              prefix-icon="el-icon-key"
            ></el-input>
          </el-form-item>
  
          <!-- 按钮 -->
          <el-form-item class="btns">
            <el-button type="primary" @click="login">登陆</el-button>
            <el-button type="info" @click="resetLoginForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </template>
  
  <script>
  // 引入初始化
  import '../assets/CSS/CSS.css'
  
  export default {
    name: 'Login',
    data() {
      return {
        loginLoading: false, // 登录限制
        loginForm: {
          // 登录的表单数据的绑定对象
          username:'admin',
          password:'123456'
        },
        // 表单验证对象
        loginFormRules: {
          // 验证用户名是否正确
          username: [
            { required: true, message: '请输入正确的账号', trigger: 'blur' },
            {
              min: 3,
              max: 10,
              message: '长度在 3 到 10 个字符',
              trigger: 'blur',
            },
          ],
          // 验证用户密码是否正确
          password: [
            { required: true, message: '请输入正确的密码', trigger: 'blur' },
            {
              min: 6,
              max: 15,
              message: '长度在 6 到 15 个字符',
              trigger: 'blur',
            },
          ],
        },
      }
    },
  
    methods: {
      // 点击按钮重置表单
      resetLoginForm() {
        this.$refs.loginFormRef.resetFields()
      },
      //    预验证 利用validate函数进行验证通过则返回true
       login() {
        this.loginLoading = true
        this.$refs.loginFormRef.validate(async valid => {
          if (!valid) {
            return (this.loginLoading = false)
          }
          const { data: res } = await this.$http.post('login',this.loginForm)
          if (res.meta.status !== 200) {
            this.loginLoading = false
            return this.$message.error('登录失败 帐号或密码错误!')
          }
          this.$message.success('登录成功!')
          // 1. 将登录成功之后的 token,保存到客户端的 sessionStorage(会话机制/只在当前页面生效)中 localStorage(持久话机制/关闭页面也不会忘记数据)
          //   1.1 项目中除了登录之外的API接口,必须在登录之后才能访问
          //   1.2 token 只应在当前网站打开期间生效, 所以将 token 保存在 sessionStorage中
          window.sessionStorage.setItem('token', res.data.token)
          // 2. 通过编程式路由导航跳转到后台主页,路由地址是 /home
          this.$router.push('/home')
          this.loginLoading = false
        })
       }
    }
  }
  </script>
  
  <style scoped>
  .login_container {
    height: 100%;
    background: #4284db; /* fallback for old browsers */
    background: -webkit-linear-gradient(
      to right,
      #29eac4,
      #4284db
    ); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(
      to right,
      #29eac4,
      #4284db
    ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
  
  .login_box {
    /* 使用盒子垂直居中 */
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: 550px;
    height: 400px;
    border-radius: 3px;
    background-color: #fff;
  }
  
  .avater_box {
    position: absolute;
    left: 50%;
    height: 130px;
    width: 130px;
    padding: 10px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #ccc;
    box-shadow: 0 0 10px #ccc;
    background-color: #fff;
  }
  
  .avater_box img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #ccc;
  }
  
  .login_from {
    position: absolute;
    bottom: 70px;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .btns {
    display: flex;
    margin-right: 50px;
    justify-content: center;
  }
  .btns button {
    width: 130px;
    margin: 0px 20px -30px 30px;
  }
  </style>
  